<script setup>
defineProps({
  title: String,
  class: String,
  navList: Array
})
const emit = defineEmits(['click'])
function handleClick(id) {
  emit('click', id)
}
</script>

<template>
  <div :class="class">
    <div class="header">
      <div class="title">{{ title }}</div>
      <div class="navBox">
        <div
          v-for="item in navList"
          :key="item.id"
          class="nav"
          :class="{ long: item.type === 'long' }"
          @click="handleClick(item.id)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  height: 34px;
  width: 100%;
  position: relative;
  background: url('/src/assets/img/box-header.png') no-repeat;
  .title {
    background-image: linear-gradient(to bottom, #BEEDFF 0%, #C8F5FF 50%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    height: 30px;
    font-family: PangMenZhengDao, PangMenZhengDao;
    font-weight: 400;
    font-size: 26px;
    line-height: 30px;
    margin-left: 45px;
  }
  .navBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
    height: 30px;
    .nav {
      width: 77px;
      cursor: pointer;
      background: url('/src/assets/img/nav.png') no-repeat;
      text-align: center;
      background-repeat: no-repeat;
    }
    .long {
      background-image: url('/src/assets/img/nav-long.png');
      width: 158px;
      background-size: 154px 30px;
    }
  }
}
.content {
  background: url('/src/assets/img/box-bg.png') no-repeat;
  width: 100%;
  height: calc(100% - 34px);
  overflow: scroll;
}
</style>
